<template>
  <div>
    <el-row style="margin-bottom: 25px;">
      <el-col :span="24">
        <el-button type="primary" @click="newBannerFlag = true">新建Banner</el-button>
      </el-col>
    </el-row>
    <el-table :row-style="rowStyle" :data="tableData" border>
      <el-table-column prop="sumAmount" label="Banner图">
        <template slot-scope="scope">
          <img :src="scope.row.bannerImg" alt style="height: 120px" />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="primary" size="small">编辑</el-button>
          <el-button @click="delBanner(scope.row)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="1"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      style="float: right;margin: 20px 50px;"
      :total="page.tatol"
    ></el-pagination>
    <el-dialog title="修改Banner" :visible.sync="dialogVisible" width="90%">
      <el-row>
        <el-col :span="6">跳转链接：</el-col>
        <el-col :span="6">banner图：（不修改不上传）</el-col>
      </el-row>
      <el-row style="margin-top: 20px;">
        <el-col :span="6">
          <el-input v-model="msg.backUrl" placeholder="请输入内容" style="width: 50%"></el-input>
        </el-col>
        <el-col :span="6">
          <input
            type="file"
            @change="upDataDriveImg($event)"
            ref="InputFile"
            name="files"
            style="width: 50%;border: 1px solid #ccc"
          />
          <!-- <img :src="msg.bannerImg" alt="" style="width: 200px"> -->
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveChange">保 存</el-button>
      </span>
    </el-dialog>
    <el-dialog title="新增Banner" :visible.sync="newBannerFlag" width="90%">
      <el-row>
        <el-col :span="6">跳转链接：</el-col>
        <el-col :span="6">banner图：</el-col>
      </el-row>
      <el-row style="margin-top: 20px;">
        <el-col :span="6">
          <el-input v-model="newBannerMsg.backUrl" placeholder="请输入内容" style="width: 50%"></el-input>
        </el-col>
        <el-col :span="6">
          <input
            type="file"
            @change="upDataDriveImg($event)"
            ref="InputFile"
            name="files"
            style="width: 50%;border: 1px solid #ccc"
          />
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="newBanner">新  增</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'
import { Message } from 'element-ui'
export default {
  data () {
    return {
      tableData: [],
      page: {
        pageSize: 10,
        pageNo: 1,
        tatol: 0
      },
      msg: {},
      dialogVisible: false,
      imgUrl: '',
      newBannerFlag: false,
      newBannerMsg: {
        backType: 0,
        backUrl: '',
        bannerImg: '',
        endTime: 0,
        page: 0,
        startTime: 0
      }
    }
  },
  created () {
    this.search()
  },
  methods: {
    handleSizeChange (val) {
      this.page.pageSize = val
      this.search()
    },
    handleCurrentChange (val) {
      this.page.pageNo = val
      this.search()
    },
    search () {
      request({
        url: '/banner/findPage',
        method: 'get',
        params: {
          pageNo: this.page.pageNo,
          pageSize: this.page.pageSize,
          isDelete: 0
        }
      }).then(res => {
        if (res.code === '00000000') {
          this.tableData = res.data.data
          this.page.tatol = parseInt(res.data.totalCount)
        }
      })
    },
    handleClick (row) {
      this.msg = row
      // console.log(row)
      this.dialogVisible = true
    },
    upDataDriveImg (event) {
      var reader = new FileReader()
      let fileData = this.$refs.InputFile.files[0]
      reader.readAsDataURL(fileData)
      let _this = this
      reader.onload = function (e) {
        // 这里的数据可以使本地图片显示到页面
        _this.addimg = e.srcElement.result
      }
      // 使用formapi打包
      let formData = new FormData()
      formData.append('file', fileData)
      request({
        url: '/resources/uploadImg',
        method: 'post',
        data: formData
      }).then(res => {
        // console.log(res)
        if (res.code === '00000000') {
          // console.log(1)
          Message({
            message: res.message,
            type: 'success',
            duration: 2000
          })
          this.imgUrl = res.data
          this.newBannerMsg.bannerImg = res.data
        } else {
          Message({
            message: res.message,
            type: 'error',
            duration: 5 * 1000
          })
        }
      })
    },
    saveChange () {
      request({
        url: '/banner/update',
        method: 'post',
        data: {
          backType: 0,
          backUrl: this.msg.backUrl,
          bannerImg: this.imgUrl,
          endTime: this.msg.endTime,
          id: this.msg.id,
          isDelete: 0,
          page: this.msg.page,
          startTime: this.msg.startTime
        }
      }).then(res => {
        if (res.code === '00000000') {
          // console.log(1)
          Message({
            message: res.message,
            type: 'success',
            duration: 2000
          })
          this.dialogVisible = false
        } else {
          Message({
            message: res.message,
            type: 'error',
            duration: 5 * 1000
          })
        }
      })
    },
    newBanner () {
      request({
        url: '/banner/insert',
        method: 'post',
        data: this.newBannerMsg
      }).then(res => {
        if (res.code === '00000000') {
          // console.log(1)
          Message({
            message: res.message,
            type: 'success',
            duration: 2000
          })
          this.newBannerFlag = false
        } else {
          Message({
            message: res.message,
            type: 'error',
            duration: 5 * 1000
          })
        }
      })
    },
    rowStyle (row) {
      // console.log(row)
      if (row.rowIndex % 2 === 0) {
        return 'background: #ccc'
      }
    },
    delBanner (row) {
      this.$confirm('确认删除？')
        .then(_ => {
          request({
            url: '/banner/update',
            method: 'post',
            data: {
              backType: 0,
              backUrl: row.backUrl,
              bannerImg: this.imgUrl,
              endTime: row.endTime,
              id: row.id,
              isDelete: 1,
              page: row.page,
              startTime: row.startTime
            }
          }).then(res => {
            if (res.code === '00000000') {
              // console.log(1)
              Message({
                message: res.message,
                type: 'success',
                duration: 2000
              })
              this.search()
            } else {
              Message({
                message: res.message,
                type: 'error',
                duration: 5 * 1000
              })
            }
          })
        })
        .catch(_ => {})
    }
  },
  watch: {
    dialogVisible (val) {
      if (!val) {
        this.search()
        this.imgUrl = ''
      }
    },
    newBannerFlag (val) {
      if (!val) {
        this.search()
        this.newBannerMsg = {
          backType: 0,
          backUrl: '',
          bannerImg: '',
          endTime: 0,
          page: 0,
          startTime: 0
        }
      }
    }
  }
}
</script>

<style>
</style>
